<template>
  <Form ref="formRef" v-slot="{errors}" :validation-schema="schema" autocomplete="off" class="xtx-form">
    <div class="user-info">
      <img :src="avatar" alt="">
      <span> Hi，{{ nickname }} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</span>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-phone"></i>
        <Field v-model="form.mobile"
               :class="{error: errors.mobile}"
               name="mobile"
               placeholder="请输入手机号"
               type="text"/>
      </div>
      <!-- 错误提示 -->
      <div v-if="errors.mobile" class="error">{{ errors.mobile }}</div>
    </div>

    <div class="xtx-form-item">
      <div class="input">
        <i class="iconfont icon-code"></i>
        <Field v-model="form.code"
               :class="{error: errors.code}"
               name="code"
               placeholder="请输入验证码"
               type="text"/>
        <span class="code" @click="sendCode">{{ codeStr }}</span>
      </div>
      <!-- 错误提示 -->
      <div v-if="errors.code" class="error">{{ errors.code }}</div>
    </div>
    <a class="btn" href="javascript:;" @click="submit">立即绑定</a>
  </Form>
</template>

<script>
import { Field, Form } from 'vee-validate'
import { reactive, ref } from 'vue'
import veeSchema from '@/utils/vee-validate-schema'
import codeUtil from '@/utils/sendCode'
import QC from 'qc'
import API from '@/api/user'
import Message from '@/components/library/Message'
import qqLogin from '@/components/login/qqLogin'

export default {
  name: 'CallbackBind',
  props: {
    unionId: {
      type: String,
      default: ''
    }
  },
  components: {
    Field,
    Form
  },
  setup(props) {
    // const store = useStore()
    // const router = useRouter()
    const formRef = ref(null)

    // 表单数据对象
    const form = reactive({
      mobile: null,
      code: null
    })

    // 校验规则对象
    const schema = {
      // 校验函数规则: 返回true就是校验成功, 返回一个字符串就是失败, 字符串就是错误提示
      mobile: veeSchema.mobile,
      code: veeSchema.code,
    }

    const {
      sendCode,
      codeStr
    } = codeUtil(form, formRef, API.userQQBindCode)

    // 1.准备下信息: unionId(openId) qq头像 名称
    // 2.完成表单验证
    // 3.发送验证码 (验证码, 定义API, 调用, 完成倒计时)
    // 4.进行绑定

    const nickname = ref(null)
    const avatar = ref(null)
    if (QC.Login.check()) {
      QC.api('get_user_info')
        .success(res => {       // 这个 success 是QQ API通过的方法
          console.log(res)
          nickname.value = res.data.nickname
          avatar.value = res.data.figureurl_1
        })
    }

    // 立即绑定
    const submit = async () => {
      const valid = formRef.value.validate()
      if (valid) {
        API.userQQBindLogin(props.unionId, form.mobile, form.code)
          .then((res) => {
            // 实现和之前登录一样的逻辑
            // 1.存储用户信息

            qqLogin(res, 'QQ绑定成功')
          })
          .catch(err => {
            console.dir(err)
            Message({
              type: 'error',
              text: err.response.data.message
            })
          })
      }
    }

    return {
      formRef,
      form,
      schema,
      sendCode,
      codeStr,
      nickname,
      avatar,
      submit
    }
  }
}
</script>

<style scoped>

</style>
